<template>
    <div class="mod-order-order">
      <div class="search-bar">
        <el-form
          :inline="true"
          :model="dataForm"
          @keyup.enter.native="getDataList(this.page)"
          size="small"
        >
          <div class="input-row">
            <!-- &nbsp;&nbsp;&nbsp; -->
            <el-form-item :label="this.$i18n.t('order.number') + '：'">
              <el-input
                v-model="dataForm.orderNumber"
                :placeholder="this.$i18n.t('order.number')"
                clearable
                size="small"
              ></el-input>
            </el-form-item>
            <el-form-item :label="this.$i18n.t('recharge.rechargeorder.useraccount') + '：'">
              <el-input
                v-model="dataForm.orderNumber"
                :placeholder="this.$i18n.t('recharge.rechargeorder.useraccount')"
                clearable
                size="small"
              ></el-input>
            </el-form-item>
            <!-- <el-form-item label="商品名称：">
              <el-input v-model="dataForm.prodName" placeholder="请输入商品名称" clearable></el-input>
            </el-form-item>-->

            <!-- &nbsp;&nbsp;&nbsp; -->
            <el-form-item :label="this.$i18n.t('order.afterSalesStatus') + '：'">
              <template>
                <el-select
                  v-model="dataForm.refundStatus"
                  clearable
                  :placeholder="this.$i18n.t('order.pleSelAfterSalesSta')"
                  size="small"
                >
                  <el-option
                    v-for="item in refund"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item :label="this.$i18n.t('order.paymentMethod') + '：'">
              <template>
                <el-select
                  v-model="dataForm.payType"
                  clearable
                  :placeholder="this.$i18n.t('order.paymentMethod')"
                  size="small"
                >
                  <el-option
                    v-for="item in payType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-form-item>
            <!-- &nbsp;&nbsp;&nbsp; -->
            <el-form-item :label="this.$i18n.t('order.contactTel') + '：'">
              <el-input
                v-model="dataForm.mobile"
                :placeholder="this.$i18n.t('order.pleaseEnterNumber')"
                clearable
                type="number"
                size="small"
                class="myinput-appearance"
              ></el-input>
            </el-form-item>
            <!-- &nbsp;&nbsp;&nbsp; -->
            <el-form-item :label="this.$i18n.t('order.createTime') + '：'">
              <el-date-picker
                size="small"
                v-model="dateRange"
                type="datetimerange"
                range-separator="—"
                value-format="yyyy-MM-dd HH:mm:ss"
                :start-placeholder="this.$i18n.t('date.start')"
                :end-placeholder="this.$i18n.t('date.end')"
              ></el-date-picker>
              <div style="margin-left: 20px;" class="default-btn" @click="setDateRange(1)">{{
                $t("date.t")
              }}</div>
              <div class="default-btn" @click="setDateRange(2)">{{
                $t("date.y")
              }}</div>
              <div class="default-btn" @click="setDateRange(3)">{{
                $t("date.n")
              }}</div>
              <div class="default-btn" @click="setDateRange(4)">{{
                $t("th")
              }}</div>
            </el-form-item>
            <div
                        class="default-btn text-btn"
                        @click="addOrUpdateHandle()"
                        >{{ $t("order.seeDetails") }}</div
                      >
            <el-form-item>
              <div
              class="default-btn primary-btn"
              @click="searchChange(true)"
              >{{ $t("order.query") }}</div
            >
            <div
              class="default-btn"
              @click="getSoldExcel()"
              >{{ $t("order.export") }}</div
            >
            <div
              class="default-btn"
              @click="clear()"
              >{{ $t("product.reset") }}</div
            >
            </el-form-item>
          </div>
          <!-- <div class="operation-box">
            <el-form-item>
              <el-button
                class="operation-btn"
                type="primary"
                icon="el-icon-search"
                size="small"
                @click="searchChange()"
              >查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                class="operation-btn"
                @click="getSoldExcel()"
                size="small"
                icon="el-icon-document-checked"
              >导出</el-button>
            </el-form-item>
            <el-form-item>
              <el-button class="operation-btn" icon="el-icon-delete" size="small" @click="clear()">清空</el-button>
            </el-form-item>
          </div>-->
        </el-form>
      </div>
      <div class="main-container main">
        <div class="content">
          <!-- 导航 -->
          <div :class="['order-status-nav','clearfix',showHeadScroll?'status-nav-bottom':'']">
            <ul class="nav-list clearfix">
              <li
                :class="['nav-item', sts == 0 ? 'selected' : '']"
                data-sts="0"
                @click="selectNav($event)"
              >
                {{ $t("date.a") }}
              </li>
              <li
                :class="['nav-item', sts == 1 ? 'selected' : '']"
                data-sts="1"
                @click="selectNav($event)"
              >
                {{ $t("order.pendingPayment") }}
              </li>
              <li
                :class="['nav-item', sts == 5 ? 'selected' : '']"
                data-sts="5"
                @click="selectNav($event)"
              >
                {{ $t("order.successfulTransaction") }}
              </li>
              <li
                :class="['nav-item', sts == 6 ? 'selected' : '']"
                data-sts="6"
                @click="selectNav($event)"
              >
                {{ $t("order.transactionFailed") }}
              </li>

            </ul>
            <ul class="nav-right"></ul>
          </div>

          <!-- 列标题 -->
          <div :class="['tit', showHeadScroll ? 'fixed-top' : '']">
            <el-row style="width: 100%">
              <el-col :span="3">
                <span class="item product">{{ $t("order.number") }}</span>
              </el-col>
              <el-col :span="3" >
                <span class="item"
                  >{{ $t("recharge.rechargeorder.submissiontime") }}
               </span
                >
              </el-col>
              <el-col :span="3" class="column-title">
                <span class="item">{{ $t("recharge.rechargeorder.useraccount") }}</span>
              </el-col>

              <el-col :span="3" class="column-title">
                <span class="item">{{ $t("recharge.rechargeorder.ordersource") }}</span>
              </el-col>
              <el-col :span="2" class="column-title">
                <span class="item">{{ $t("recharge.rechargeorder.orderamount") }}</span>
              </el-col>
              <el-col :span="3" class="column-title">
                <span class="item">{{ $t("recharge.rechargeorder.paymentstatus") }}</span>
              </el-col>
              <el-col :span="2" class="column-title">
                <span class="item">{{ $t("order.paymentMethod") }}</span>
              </el-col>
              <el-col :span="2" class="column-title">
                <span class="item">{{ $t("order.orderStatus") }}</span>
              </el-col>
              <el-col :span="2" class="column-title">
                <span class="item">{{ $t("order.operation") }}</span>
              </el-col>
            </el-row>
          </div>

          <div class="prod" v-for="order in dataList" :key="order.orderId">
            <div class="prod-tit">
              <span>{{ $t("order.number") }}：{{ order.orderNumber }}</span>
              <span>{{ $t("order.createTime") }}：{{ order.createTime }}</span>
              <span>{{ $t("prodList.shopName") }}：{{ order.shopName }}</span>
              <!-- <span>买家：19999999999</span>
              <span >联系电话：19999999999</span>-->
            </div>
            <div class="prod-cont">
              <el-row style="width: 100%">
                <el-col :span="10" style="height: 100%">
                  <div class="item prod-item">
                    <div
                      class="items name"
                      v-for="orderItem in order.orderItems"
                      :key="orderItem.orderItemId"
                    >
                      <!-- 商品信息 -->
                      <div class="order-prod-item-info">
                        <div class="info">
                          <div class="prod-image">
                            <prod-pic
                              :pic="orderItem.pic"
                            ></prod-pic>
                          </div>
                          <div class="prod-name">
                            <div class="prod-con">
                              <div class="prod-name-txt">
                                {{ orderItem.prodName }}
                              </div>
                              <div v-if="orderItem.skuName" class="prod-name-sku">
                                {{ orderItem.skuName }}
                              </div>
                              <div
                                class="order-status"
                                v-if="order.orderType === 1 || order.orderType === 2"
                              >
                                {{
                                  order.orderType === 1
                                    ? $t("order.groupPurchaseOrder")
                                    : order.orderType === 2
                                    ? $t("order.spikeOrder")
                                    : ""
                                }}
                              </div>
                              <div
                                class="order-status"
                                v-if="order.orderMold === 1"
                              >
                                {{ $t("order.virtualOrder") }}
                              </div>
                              <div
                                class="order-status"
                                v-if="
                                  !orderItem.returnMoneySts ||
                                  orderItem.returnMoneySts < 0 ||
                                  orderItem.returnMoneySts > 5
                                "
                              >
                                {{
                                  orderItem.status === 0 && order.status === 2
                                    ? $t("order.pendingReceipt")
                                    : [
                                        "",
                                        $t("order.pendingPayment"),
                                        $t("order.toBeShipped"),
                                        $t("order.pendingReceipt"),
                                        "",
                                        $t("order.successfulTransaction"),
                                        $t("order.transactionFailed"),
                                        $t("group.waitGroup"),
                                      ][order.status]
                                }}
                              </div>
                              <div class="order-status" v-else>
                                {{
                                  [
                                    "",
                                    $t("refundOrderDetail.buyerApply"),
                                    $t("order.sellerAccepts"),
                                    $t("refundOrderDetail.buyerDelivery"),
                                    $t("order.sellerReceivesGoods"),
                                    $t("order.refundsuccessfully"),
                                  ][orderItem.returnMoneySts]
                                }}
                              </div>
                              <div
                                class="order-status"
                                v-if="order.dvyType === 2 || order.dvyType === 4"
                              >
                                {{
                                  order.dvyType === 2
                                    ? $t("order.selfMention")
                                    : order.dvyType === 4
                                    ? $t("order.sameCityDelivery")
                                    : ""
                                }}
                              </div>
                              <!-- <span class="prod-info">{{orderItem.skuName}}</span> -->
                              <div
                                class="order-status"
                                v-if="orderItem.preSaleTime !== null"
                              >
                                {{ $t('order.EstimatedDeliveryTime') }}{{ orderItem.preSaleTime }}
                              </div>
                            </div>
                          </div>
                        </div>
                        <!-- 赠品信息 -->
                        <div v-if="orderItem.giveawayList" class="order-prod-item-give-con">
                          <div class="giveaway-item" v-for="(giveawayItem, giveIndex) in orderItem.giveawayList" :key="giveIndex">
                            <div class="giveaway-item-name"> 【{{$i18n.t('order.giveawayPord')}}】 {{giveawayItem.prodName}}</div>
                            <div class="giveaway-item-sku-count">{{giveawayItem.skuName || ''}} x{{giveawayItem.prodCount}}</div>
                          </div>
                        </div>
                      </div>
                      <div class="prod-price">
                        <span>{{ orderItem.price.toFixed(2) }}</span>
                        <span
                          >{{ orderItem.prodCount
                          }}{{ $t("marketing.item") }}</span
                        >
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="3" style="height: 100%;text-align: center;">
                  <div class="item">
                    <div>
                      <span class="totalprice">
                        {{ order.actualTotal.toFixed(2) }}
                        {{
                          order.payScore && order.payScore > 0
                            ? "+ " + order.payScore + $t("order.score")
                            : ""
                        }}
                      </span>
                      <span class="totalprice" v-if="order.freightAmount - order.platformFreeFreightAmount > 0"
                        >（{{ $t("order.includingFreight") }}：
                        {{ (order.freightAmount - order.platformFreeFreightAmount).toFixed(2) }}）</span
                      >
                      <span
                        >{{ $t("order.total") }} {{ order.productNums }}
                        {{ $t("order.piece") }}</span
                      >
                    </div>
                  </div>
                </el-col>
                <el-col :span="2" style="height: 100%">
                  <div class="item">
                    <div>
                      <span v-if="(!order.payType && order.payType != 0) || order.status === 1">{{
                        $t("order.unpaid")
                      }}</span>
                      <span v-else>
                        {{
                          [
                            $t("order.pointsPayment"),
                            $t("order.wecProPay"),
                            $t("order.alipayPCPayment"),
                            $t("order.wechatScanCodePayment"),
                            $t("order.wechatH5Payment"),
                            $t("order.weclAccountPay"),
                            $t("order.alipayH5Payment"),
                            $t("order.alipayAPPPayment"),
                            $t("order.wechatAPPPayment"),
                            $t("order.balancePayment"),
                            $t("order.payPalPayment"),
                            $t('order.xspayAliH5Payment'),
                            $t('order.xspayYsfH5Payment'),
                            $t('order.xspayAliAccountPay'),
                            $t('order.xspayWeAccountPay'),
                            $t('order.xspayKjPayment')
                          ][order.payType]
                        }}
                      </span>
                    </div>
                  </div>
                </el-col>
                <el-col :span="3" style="height: 100%">
                  <div class="item">
                    <div class="buyer-info">
                      <div class="buyer-name">
                        {{ order.receiverName }}
                      </div>
                      <div class="buyer-phone">
                        {{ order.receiverMobile }}
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col :span="2" style="height: 100%">
                  <div class="item">
                    <!-- <span v-if="order.refundStatus === 1" size="small" type="danger">退款申请中</span> -->
                    <span>
                      <span
                        v-if="order.status === 1"
                        size="small"
                        type="danger"
                        >{{ $t("order.pendingPayment") }}</span
                      >
                      <span
                        v-else-if="order.status === 2"
                        size="small"
                        type="danger"
                        >{{ $t("order.toBeShipped") }}</span
                      >
                      <span
                        v-else-if="order.status === 3"
                        size="small"
                        type="danger"
                        >{{ $t("order.pendingReceipt") }}</span
                      >
                      <span
                        v-else-if="order.status === 7"
                        size="small"
                        type="danger"
                        >{{ $t("group.waitGroup") }}</span
                      >
                      <span
                        v-else-if="order.status === 5"
                        size="small"
                        type="danger"
                        >{{ $t("order.successfulTransaction") }}</span
                      >
                      <span v-else-if="order.status === 6" size="small">{{
                        $t("order.transactionFailed")
                      }}</span>
                    </span>
                  </div>
                </el-col>
                <el-col :span="2" style="height: 100%">
                  <div class="item">
                    <span
                      v-if="order.refundStatus === 1"
                      size="small"
                      type="danger"
                      >{{ $t("order.requestARefund") }}</span
                    >
                    <span
                      v-else-if="order.refundStatus === 2"
                      size="small"
                      type="danger"
                      >{{ $t("order.refundsuccessfully") }}</span
                    >
                    <span
                      v-else-if="order.refundStatus === 3"
                      size="small"
                      type="danger"
                      >{{ $t("order.partialRefundSucc") }}</span
                    >
                    <span
                      v-else-if="order.refundStatus === 4"
                      size="small"
                      type="danger"
                      >{{ $t("order.refundFailed") }}</span
                    >
                    <span v-else size="small" type="danger">{{
                      $t("order.noAfterSales")
                    }}</span>
                  </div>
                </el-col>
                <el-col :span="2" style="height: 100%">
                  <div class="item">
                    <div class="operate">
                      <div
                        class="default-btn text-btn"
                        @click="addOrUpdateHandle()"
                        >{{ $t("order.seeDetails") }}</div
                      >
                      <div
                        class="default-btn text-btn"
                        @click="toImbox(order)"
                        >{{ $t("order.contactBuyer") }}</div
                      >
                      <div
                        class="default-btn text-btn"
                        @click="refundRoute(order.orderNumber)"
                        v-if="order.refundStatus"
                        >{{ $t("order.refundInformation") }}</div
                      >
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <!-- <div class="remark">
              <div class="buyer-remark">
                <span>备注:{{order.remarks}}</span>
              </div>
            </div>-->
          </div>
          <div class="empty" v-if="!dataList.length">
            {{ $t("order.noData") }}
          </div>
        </div>
      </div>
      <el-pagination
        v-if="dataList.length"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>

      <rechargeorder v-if="rechar"
                   ref="rechargeorder"
                  ></rechargeorder>
    </div>
  </template>

  <script>
  import rechargeorder from './rechargeorder-update'

  export default {
    components: {
        rechargeorder
  },

    name: 'order-order',
    data () {
      return {
        theData: null, // 保存上次点击查询的请求条件
        rechar:false,
        showHeadScroll: false,
        sts: 0,
        dataForm: {},
        dateRange: [],
        status: null,
        options: [{
          value: 1,
        },
        {
          value: 2,
          label: this.$i18n.t('order.toBeShipped')
        },
        {
          value: 3,
          label: this.$i18n.t('order.pendingReceipt')
        },
        {
          value: 5,
          label: this.$i18n.t('order.successfulTransaction')
        },
        {
          value: 6,
          label: this.$i18n.t('order.transactionFailed')
        },
        {
          value: 7,
          label: this.$i18n.t('group.waitGroup')
        }],
        refund: [{
          value: 0,
          label: this.$i18n.t('order.noAfterSales')
        },
        {
          value: 1,
          label: this.$i18n.t('order.requestARefund')
        },
        {
          value: 2,
          label: this.$i18n.t('order.refundsuccessfully')
        },
        {
          value: 3,
          label: this.$i18n.t('order.partialRefundSucc')
        },
        {
          value: 4,
          label: this.$i18n.t('order.refundFailed')
        }],
        orderType: [{
          value: 0,
          label: this.$i18n.t('order.normalOrder')
        }, {
          value: 1,
          label: this.$i18n.t('order.groupPurchaseOrder')
        }, {
          value: 2,
          label: this.$i18n.t('order.spikeOrder')
        }],
        orderMold: [{
          value: 0,
          label: this.$i18n.t('order.physicalOrder')
        }, {
          value: 1,
          label: this.$i18n.t('order.virtualOrder')
        }],
        dvyType: [{
          value: 1,
          label: this.$i18n.t('order.expressDelivery')
        },
        {
          value: 2,
          label: this.$i18n.t('order.selfMention')
        },
        {
          value: 3,
          label: this.$i18n.t('order.noNeedRequired')
        },
        {
          value: 4,
          label: this.$i18n.t('order.sameCityDelivery')
        }],
        payType: [{
          value: 0,
          label: this.$i18n.t('order.pointsPayment')
        }, {
          value: 1,
          label: this.$i18n.t('order.weixinPay')
        }, {
          value: 2,
          label: this.$i18n.t('order.aliPay')
        }, {
          value: 3,
          label: this.$i18n.t('publics.balancePay')
        }, {
          value: 4,
          label: this.$i18n.t('order.payPalPayment')
        }, {
          value: 5,
          label: this.$i18n.t('order.xsPay')
        }],
        resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
        dataList: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 10 // 每页显示多少条
        },
        lang: localStorage.getItem('lang') || 'zh_CN',
      }
    },
    computed: {
      // 二级菜单折叠状态
    },

    created () {

      // 携带参数查询
    },
    activated () {
      // 携带参数查询

    },
    mounted () {
      // 监听页面滚动

    },
    methods: {
      /**
       * 页面滚动事件
       */



      // 每页数
      sizeChangeHandle (val) {
        this.page.pageSize = val
        this.page.currentPage = 1
        this.getDataList(this.page, {}, 1)
      },
      // 当前页
      currentChangeHandle (val) {
        this.page.currentPage = val
        this.getDataList(this.page, {}, 1)
      },

      /**
       * 导航选择状态
       */
      selectNav (e) {
        var sts = e.currentTarget.dataset.sts
        this.sts = parseInt(sts)
        this.status = this.sts === 0 ? null : parseInt(sts)
        this.page.currentPage = 1
        this.getDataList(this.page)
      },

      orderStatus (val) {
        this.status = val
        this.sts = val
        this.getDataList()
      },
      /**
       * 根据选项设置时间
       * 1:今天 2:昨天 3: 近七天 4:近30天 5:近60天
       */
      setDateRange (val) {
        var startDay = null
        var endDay = null
        if (val === 1) {
          startDay = 0
          endDay = 0
        } else if (val === 2) {
          startDay = -1
          endDay = -1
        } else if (val === 3) {
          startDay = -7
          endDay = -1
        } else if (val === 4) {
          startDay = -30
          endDay = -1
        } else {
          return
        }
        // 开始时间
        let startTime = moment().add(startDay, 'days').startOf('days').format('LL')
        // 结束时间
        let endTime = moment().add(endDay, 'days').endOf('days').format('LL')
        this.dateRange = [startTime, endTime]
      },
      // 搜索查询
      searchChange (newData = false) {
        this.page.currentPage = 1
        this.getDataList(this.page, null, 0, newData)
      },
      addOrUpdateHandle(){
        this.rechar = true
        this.$nextTick(() => {
            this.$refs.rechargeorder.init()
        })
    },

    },

  }
  </script>
  <style lang="scss" scoped>

  .mod-order-order {
    .search-bar {
      .input-row {
        .select-time-btn {
          margin-right: 20px;
          display: inline-block;
          color: #AAAAAA;
          font-size: 14px;
          cursor:pointer;
          &:last-child {
            margin-right: 0;
          }
        }
        .select-time-btn.is-active {
          color: #155BD4;
        }

      }
    }
    .main {
      .order-status-nav {
        position: relative;
        display: block;
        width: 100%;
        margin-bottom: 15px;
        // height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #ddd;
        ul,
        li {
          list-style: none;
          padding: 0;
          margin: 0;
        }
        .nav-item {
          float: left;
          height: 40px;
          line-height: 40px;
          background: #f8f8f9;
          border: 1px solid #ddd;
          padding: 0 20px;
          margin: 0 -1px -1px 0;
          cursor: pointer;
        }

        .selected {
          background: #fff;
          border-bottom: 1px solid #fff;
        }
      }
      .status-nav-bottom{
        margin-bottom: 72px;
      }
      .tit {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        background: #F7F8FA;
        z-index: 11;
        height: 57px;
        font-weight: bold;
        .item {
          padding: 0 10px;
          width: 10%;
          text-align: center;
        }
        .product {
          width: 25%;
          margin-bottom: 15px
        }
      }
      .fixed-top {
        position: fixed;
        width: calc(83.5% + var(--tit-width-incremental));
        top: 90px;
      }
      .prod {
        margin-bottom: 15px;
        .prod-tit {
          padding: 10px;
          background: #F7F8FA;
          height: 49px;
          display: flex;
          align-items: center;
          border-left: 1px solid #EBEDF0;
          border-top: 1px solid #EBEDF0;
          border-right: 1px solid #EBEDF0;
          .order-number{
            color: #333333;
            font-size: 14px
          }
          .order-time{
            color: #999999;
            font-size: 14px
          }
          span {
            margin-right: 15px;
          }
        }
        .prod-cont {
          display: flex;
          border: 1px solid #EBEDF0;
          color: #495060;
          .item {
            display: flex;
            display: -webkit-flex;
            align-items: center !important;
            padding: 10px;
            justify-content: center !important;
            height: 100%;
            border-right: 1px solid #eee;
            .totalprice {
              color: #ff4141;
              margin-bottom: 10px;
            }
            .operate {
              color: #2d8cf0;
              height: auto;
              .operate-btn {
                height: auto;
                margin: 0 !important;
                display: block !important;
              }
              .default-btn + .default-btn {
                height: auto;
                display: block;
                margin-left: 0;
              }
            }
            .buyer-info {
              .buyer-name {
                margin-bottom: 10px;
              }
            }
            span {
              display: block;
              margin-bottom: 0 !important;
            }
            span + span {
              margin-top: 10px;
            }
          }
          .prod-item {
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100%;
            border-right: 1px solid #eee;
            .items.name {
              width: 100%;
              display: flex;
              align-items: center;
              border-bottom: 1px solid #EBEDF0;
              padding: 10px;
              &:last-child {
                border-bottom: none;
              }
              .order-prod-item-info {
                width: 72%;
                display: flex;
                flex-direction: column;
                .info {
                  display: flex;
                  align-items: center;
                  .prod-image {
                    // width: 80px;
                    width: 17.5%;
                    min-height: 80px;
                    height: auto;
                    margin-right: 20px;
                    line-height: 80px;
                    img {
                      width: 100%;
                      min-height: 100%;
                      object-fit: contain;
                    }
                  }
                  .prod-name {
                    flex: 1;
                    margin-left: auto;
                    max-width: 78% !important;
                    .prod-con {
                      text-align: left;
                      width: 85% !important;
                      display: block;
                      padding: 0 !important;
                      .prod-name-txt {
                        padding-right: 10px;
                        box-sizing: border-box;
                        display: -webkit-box;
                        word-break: break-word;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                      }
                      .prod-name-sku {
                        color: #999;
                      }
                      .order-status {
                        display: inline-block;
                        margin-top: 15px;
                        margin-right: 10px;
                        padding: 2px 4px;
                        border: 1px solid #e43130;
                        border-radius: 2px;
                        color: #e43130;
                      }
                    }
                  }
                }
                // 赠品盒子
                .order-prod-item-give-con {
                  width: 100%;
                  padding: 10px 50px 0 0;
                  box-sizing: border-box;
                  .giveaway-item {
                    display: flex;
                    margin-bottom: 10px;
                    &:last-child {
                      margin-bottom: 0;
                    }
                  }
                  .giveaway-item-name {
                    box-sizing: border-box;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                  }
                  .giveaway-item-sku-count {
                    margin-left: 10px;
                    color: #999;
                    width: auto;
                  }
                }
              }
              .prod-price {
                width: 28%;
                display: flex;
                justify-content: flex-start;
                flex-direction: column;
                overflow: hidden;
                position: relative;
                right: 0;
                span {
                  display: block;
                  text-align: center;
                  word-break: keep-all;
                }
              }
            }
          }
        }
      }
      .empty {
        display: block;
        height: 200px;
        line-height: 200px;
        text-align: center;
        color: #aaa;
      }
      .transaction-price {
        text-align: center;
      }
    }
    ::v-deep .export-load {
      top: -50% !important;
    }
    @media (max-width:1660px) {
      .fixed-top {
        width: calc(79.5% + var(--tit-width-incremental)) !important;
      }
    }
    @media (max-width:1360px) {
      .fixed-top {
        width: calc(75.5% + var(--tit-width-incremental)) !important;
      }
    }
  }
  div ::v-deep .el-form-item--small .el-form-item__content {
    display: flex;
    flex-wrap: wrap;
  }
  </style>
  <style>
    /* chrome */
   .mod-order-order .search-bar .input-row .myinput-appearance>input::-webkit-outer-spin-button,
   .mod-order-order .search-bar .input-row .myinput-appearance>input::-webkit-inner-spin-button {
          -webkit-appearance: none;
      }
      /* 火狐浏览器 */
    .mod-order-order .search-bar .input-row .myinput-appearance>input[type="number"]{
          -moz-appearance: textfield;
      }
  </style>
